<template>
  <div class="mine">
    <transition name="componentTab">
      <div class="setting" v-show="isShowSetting"><SettingComponent @changeShowSetting="changeShowSetting"/></div>
    </transition>
    <header class="header">
      <div class="left" @click.stop="isShowSetting=true">
        <div>
          <svg
            t="1676107675419"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4300"
            width="16"
            height="16"
          >
            <path
              d="M512 328c-100.8 0-184 83.2-184 184S411.2 696 512 696 696 612.8 696 512 612.8 328 512 328z m0 320c-75.2 0-136-60.8-136-136s60.8-136 136-136 136 60.8 136 136-60.8 136-136 136z"
              p-id="4301"
              fill="#151515"
            ></path>
            <path
              d="M857.6 572.8c-20.8-12.8-33.6-35.2-33.6-60.8s12.8-46.4 33.6-60.8c14.4-9.6 20.8-27.2 16-44.8-8-27.2-19.2-52.8-32-76.8-8-14.4-25.6-24-43.2-19.2-24 4.8-48-1.6-65.6-19.2-17.6-17.6-24-41.6-19.2-65.6 3.2-16-4.8-33.6-19.2-43.2-24-14.4-51.2-24-76.8-32-16-4.8-35.2 1.6-44.8 16-12.8 20.8-35.2 33.6-60.8 33.6s-46.4-12.8-60.8-33.6c-9.6-14.4-27.2-20.8-44.8-16-27.2 8-52.8 19.2-76.8 32-14.4 8-24 25.6-19.2 43.2 4.8 24-1.6 49.6-19.2 65.6-17.6 17.6-41.6 24-65.6 19.2-16-3.2-33.6 4.8-43.2 19.2-14.4 24-24 51.2-32 76.8-4.8 16 1.6 35.2 16 44.8 20.8 12.8 33.6 35.2 33.6 60.8s-12.8 46.4-33.6 60.8c-14.4 9.6-20.8 27.2-16 44.8 8 27.2 19.2 52.8 32 76.8 8 14.4 25.6 22.4 43.2 19.2 24-4.8 49.6 1.6 65.6 19.2 17.6 17.6 24 41.6 19.2 65.6-3.2 16 4.8 33.6 19.2 43.2 24 14.4 51.2 24 76.8 32 16 4.8 35.2-1.6 44.8-16 12.8-20.8 35.2-33.6 60.8-33.6s46.4 12.8 60.8 33.6c8 11.2 20.8 17.6 33.6 17.6 3.2 0 8 0 11.2-1.6 27.2-8 52.8-19.2 76.8-32 14.4-8 24-25.6 19.2-43.2-4.8-24 1.6-49.6 19.2-65.6 17.6-17.6 41.6-24 65.6-19.2 16 3.2 33.6-4.8 43.2-19.2 14.4-24 24-51.2 32-76.8 4.8-17.6-1.6-35.2-16-44.8z m-56 92.8c-38.4-6.4-76.8 6.4-104 33.6-27.2 27.2-40 65.6-33.6 104-17.6 9.6-36.8 17.6-56 24-22.4-30.4-57.6-49.6-97.6-49.6-38.4 0-73.6 17.6-97.6 49.6-19.2-6.4-38.4-14.4-56-24 6.4-38.4-6.4-76.8-33.6-104-27.2-27.2-65.6-40-104-33.6-9.6-17.6-17.6-36.8-24-56 30.4-22.4 49.6-57.6 49.6-97.6 0-38.4-17.6-73.6-49.6-97.6 6.4-19.2 14.4-38.4 24-56 38.4 6.4 76.8-6.4 104-33.6 27.2-27.2 40-65.6 33.6-104 17.6-9.6 36.8-17.6 56-24 22.4 30.4 57.6 49.6 97.6 49.6 38.4 0 73.6-17.6 97.6-49.6 19.2 6.4 38.4 14.4 56 24-6.4 38.4 6.4 76.8 33.6 104 27.2 27.2 65.6 40 104 33.6 9.6 17.6 17.6 36.8 24 56-30.4 22.4-49.6 57.6-49.6 97.6 0 38.4 17.6 73.6 49.6 97.6-6.4 19.2-14.4 38.4-24 56z"
              p-id="4302"
              fill="#151515"
            ></path>
          </svg>
        </div>
      </div>
      <div class="right" @click.stop="$toast(api.msg)">
        <div>
          <svg
            t="1675429886793"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4634"
            width="22"
            height="22"
          >
            <path
              d="M419.037 287.953h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32zM419.028 543.17h411.608c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.028c-17.673 0-32 14.327-32 32s14.327 32 32 32zM832.161 735.802H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32z"
              fill="#151515"
              p-id="4635"
            ></path>
            <path
              d="M256.037 255.953m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
              fill="#151515"
              p-id="4636"
            ></path>
            <path
              d="M256.037 510.787m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
              fill="#151515"
              p-id="4637"
            ></path>
            <path
              d="M256.037 767.621m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
              fill="#151515"
              p-id="4638"
            ></path>
          </svg>
        </div>
        <div>
          <svg
            t="1675429797786"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3569"
            width="22"
            height="22"
          >
            <path
              d="M192.032 631.402667V404.725333C192.032 228.330667 335.285333 85.333333 512 85.333333s319.968 142.997333 319.968 319.392v226.677334l60.608 121.013333c10.645333 21.237333-4.832 46.218667-28.618667 46.218667H160.042667c-23.786667 0-39.253333-24.981333-28.618667-46.218667l60.608-121.013333z m620.16 103.36l-40.842667-81.536a31.893333 31.893333 0 0 1-3.381333-14.282667V404.725333c0-141.12-114.602667-255.509333-255.968-255.509333S256.032 263.605333 256.032 404.725333V638.933333c0 4.96-1.162667 9.845333-3.381333 14.293334l-40.842667 81.525333h600.384z m-443.306667 152.32a31.893333 31.893333 0 0 1-4.149333-44.981334 32.032 32.032 0 0 1 45.056-4.138666A159.36 159.36 0 0 0 512 874.773333a159.36 159.36 0 0 0 102.186667-36.8 32.032 32.032 0 0 1 45.056 4.138667 31.893333 31.893333 0 0 1-4.16 44.981333A223.402667 223.402667 0 0 1 512 938.666667c-52.981333 0-103.2-18.453333-143.114667-51.594667z"
              fill="#151515"
              p-id="3570"
            ></path>
          </svg>
        </div>
      </div>
    </header>
    <section class="user-head" title="用户信息" @click.stop="$toast(api.msg)">
      <div class="left">
        <img src="@/../public/images/default-user.png" alt="" />
      </div>
      <div class="right">
        <div class="my-text name">意大利面</div>
        <div class="sec">
          <div class="img-box">
            <img src="@/../public/images/mine/1676288217605.png" alt="" />
            <div class="count">0枚</div>
          </div>
          <div class="lvl">Lv1</div>
        </div>
        <div class="three">补全资料，+500经验值</div>
      </div>
    </section>
    <section class="info" title="年龄地址相关" @click.stop="$toast(api.msg)">
      <div class="first">
        <span>厨娘</span><span>猫龄0.1岁</span><span>IP属地 广东</span>
      </div>
      <div class="my-text signature">在吃饭，没时间写签名</div>
    </section>
    <div class="correlation" @click.stop="$toast(api.msg)">
      <div>
        <div>{{ att }}</div>
        <div>关注</div>
      </div>
      <div>
        <div>0</div>
        <div>粉丝</div>
      </div>
      <div>
        <div>0</div>
        <div>被收藏</div>
      </div>
      <div>
        <div>0</div>
        <div>被学做</div>
      </div>
      <div>
        <div>0</div>
        <div>经验值</div>
      </div>
    </div>
    <div class="vip">
      <img src="@/../public/images/mine/1676290008562.png" alt="" />
    </div>
    <section class="tags" title="标签" v-if="allTags?.user_channels" @click.stop="$toast(api.msg)">
      <div class="tag" v-for="item in allTags?.user_channels" :key="item.id">
        <div class="img-box">
          <img :src="item.icon" alt="" />
        </div>
        <div class="title">{{ item.title }}</div>
      </div>
    </section>
    <van-cell-group>
      <van-cell
        @click="$emit('changeAtNightState')"
        :title="atNight ? '夜间模式' : '日间模式'"
      >
        <template #right-icon>
          <transition-group class="svg-box" tag="div" name="opt">
            <svg
              :key="1"
              v-if="atNight"
              class="icon-svg"
              t="1675998699836"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2131"
              width="16"
              height="16"
            >
              <path
                d="M928.708 631.165c-10.55-7.873-25.681-7.958-36.323-0.221-51.451 37.408-112.368 57.181-176.162 57.181-165.384 0-299.932-134.55-299.932-299.934 0-102.947 51.881-197.53 138.788-253.004 11.363-7.254 16.617-20.867 13.072-33.884-3.553-13.003-14.989-22.065-28.459-22.548-6.098-0.219-11.2-0.319-16.041-0.319-243.004 0-440.702 197.698-440.702 440.702s197.698 440.699 440.702 440.699c186.509 0 353.539-118.118 415.629-293.922 4.494-12.72 0.247-26.686-10.572-34.75z m-405.054 267.41c-209.224 0-379.44-170.216-379.44-379.437 0-180.42 128.231-335.588 302.461-371.598-59.303 66.024-91.65 150.461-91.646 240.65 0 199.165 162.029 361.198 361.194 361.198 43.171 0 85.003-7.411 124.72-22.06-69.831 106.273-189.028 171.247-317.289 171.247z"
                p-id="2132"
                fill="#151515"
              ></path>
              <path
                d="M578.717 553.718c3.913 13.058 15.702 21.832 29.335 21.835h161.76c16.891 0 30.632-13.741 30.632-30.632 0-16.891-13.741-30.632-30.632-30.632h-59.625l76.481-50.411c11.382-7.503 16.395-21.315 12.483-34.371-3.916-13.054-15.703-21.83-29.338-21.832H608.057c-16.891 0-30.632 13.739-30.632 30.63 0 16.893 13.741 30.632 30.632 30.632h59.62l-76.481 50.411c-11.382 7.503-16.395 21.32-12.479 34.37zM738.675 336.271c3.134 10.427 12.55 17.432 23.437 17.438h99.261c8.714 0 16.834-4.689 21.189-12.237 4.359-7.544 4.359-16.919 0-24.47-4.355-7.546-12.476-12.232-21.189-12.232h-17.678l31.145-20.529c9.094-5.994 13.099-17.031 9.97-27.457-3.076-10.265-12.713-17.436-23.437-17.441h-99.261c-13.493 0-24.467 10.977-24.467 24.47 0 13.491 10.973 24.468 24.467 24.468h17.678l-31.149 20.531c-9.084 5.994-13.089 17.027-9.966 27.459zM797.023 144.991c2.534 8.457 10.168 14.141 19.006 14.15h83.87a19.915 19.915 0 0 0 17.192-9.926 19.91 19.91 0 0 0-0.004-19.851 19.912 19.912 0 0 0-17.188-9.917h-17.696l28.627-18.868c7.363-4.863 10.607-13.812 8.076-22.267-2.536-8.457-10.17-14.141-19.007-14.15h-83.87c-7.071 0-13.661 3.803-17.188 9.919a19.895 19.895 0 0 0-0.004 19.851c3.53 6.123 10.12 9.924 17.192 9.924h17.696l-28.627 18.868c-7.364 4.863-10.608 13.814-8.075 22.267z"
                p-id="2133"
                fill="#151515"
              ></path>
            </svg>
            <svg
              :key="2"
              v-else
              t="1675998925031"
              class="icon-svg"
              viewBox="0 0 1025 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2457"
              width="16"
              height="16"
            >
              <path
                d="M512.640801 798.010847a289.001252 289.001252 0 1 1 288.14685-289.001252A289.428452 289.428452 0 0 1 512.640801 798.010847z m0-513.922403a224.921151 224.921151 0 1 0 224.06675 224.921151A225.134752 225.134752 0 0 0 512.640801 284.088444zM274.476429 291.564456a32.04005 32.04005 0 0 1-21.360034-8.544014L178.142678 213.600334a32.04005 32.04005 0 0 1 43.788069-46.778473l74.546516 69.847309a32.04005 32.04005 0 0 1-21.360033 55.322486zM64.0801 536.991239a32.04005 32.04005 0 0 1 0-64.0801L165.113058 469.920734a32.04005 32.04005 0 0 1 1.922403 64.0801l-101.887359 3.204005zM190.958698 856.110138a31.82645 31.82645 0 0 1-23.496036-53.827284l69.847309-74.546517a32.25365 32.25365 0 0 1 45.283271-1.495202 31.82645 31.82645 0 0 1 1.495202 45.283271L213.600334 846.070922a32.25365 32.25365 0 0 1-22.641636 10.039216zM506.232791 992.17355A32.04005 32.04005 0 0 1 474.192741 961.201502l-3.204005-101.887359a32.04005 32.04005 0 1 1 64.0801-2.136004l3.417605 102.10096a32.25365 32.25365 0 0 1-31.185648 33.108052zM825.35169 865.294952a31.399249 31.399249 0 0 1-21.360034-8.757614l-74.546516-69.847309a32.04005 32.04005 0 0 1 44.001669-46.564873l74.332916 69.84731a31.82645 31.82645 0 0 1 0.854401 44.428869 32.680851 32.680851 0 0 1-23.282436 10.893617zM859.100542 553.224864a32.04005 32.04005 0 0 1 0-64.0801l102.10096-3.204005a32.04005 32.04005 0 0 1 2.136003 64.0801l-102.100959 3.204005zM764.475594 305.448477a32.25365 32.25365 0 0 1-21.360033-8.757613 31.82645 31.82645 0 0 1-1.495202-45.283271L811.681268 177.074677a32.04005 32.04005 0 1 1 46.778473 43.788068l-69.847309 74.332916a32.04005 32.04005 0 0 1-24.136838 10.252816z"
                p-id="2458"
                fill="#151515"
              ></path>
              <path
                d="M522.252816 196.939508A31.82645 31.82645 0 0 1 491.280768 165.967459L487.008761 64.0801a32.04005 32.04005 0 0 1 31.185649-32.894451A31.399249 31.399249 0 0 1 551.088861 61.944097l4.272007 102.100959a31.82645 31.82645 0 0 1-32.04005 32.894452z"
                p-id="2459"
                fill="#151515"
              ></path>
            </svg>
          </transition-group>
        </template>
      </van-cell>
    </van-cell-group>
    <van-tabs v-model="active" class="nav">
      <van-tab title="菜谱"
        ><div class="content">要发布点内容才能显示我的名声</div></van-tab
      >
      <van-tab title="笔记"
        ><van-calendar
          title="日历"
          :poppable="false"
          :show-confirm="false"
          :max-date="new Date()"
          :style="{ height: '500px' }"
      /></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from "vuex";
import SettingComponent from "@/components/mine/SettingComponent.vue";
export default {
  props: ["atNight", "allTags"],
  components: {
    SettingComponent,
  },
  data: () => {
    return {
      att: 0,
      active: 0,
      isShowSetting:false
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods:{
    changeShowSetting(){
      this.isShowSetting = false;
    }
  },
  activated() {
    this.att = JSON.parse(localStorage.getItem("attentionList"))?.length || 0;
  },
  mounted() {
    console.log(this.allTags?.user_channels);
  },
};
</script>

<style lang="scss" scoped>
.mine {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.16rem;
  color: var(--text-black);
  padding-bottom: 0.5rem;
  .setting {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    background-color: var(--bgc-white);
    width: 100vw;
    height: 100vh;
    overflow: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .header {
    position: sticky;
    left: 0;
    top: 0;
    background-color: var(--bgc-white);
    z-index: 100;
    width: 100%;
    height: 0.55rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      > div {
        width: 0.21rem;
        height: 0.22rem;
      }
    }
    .right {
      display: flex;
      > div {
        width: 0.21rem;
        height: 0.22rem;
        margin-left: 0.18rem;
      }
    }
  }
  .user-head {
    width: 100%;
    display: flex;
    align-items: center;
    .left {
      width: 0.62rem;
      height: 0.62rem;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 0.1rem;
    }
    .right {
      margin-left: 0.2rem;
      .name {
        font-size: 0.2rem;
      }
      .sec {
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 0.12rem;
        .img-box {
          width: 0.5rem;
          height: 0.18rem;
          position: relative;
          .count {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto 0;
            right: 0.05rem;
            color: var(--text-gray5);
          }
        }
        .lvl {
          color: var(--text-lv);
          margin-left: 0.05rem;
        }
      }
      .three {
        width: 2.36rem;
        height: 0.34rem;
        border-radius: 0.17rem;
        font-size: 0.17rem;
        line-height: 0.34rem;
        text-align: center;
        margin-top: 0.05rem;
        background-color: var(--text-icon-yellow);
      }
    }
  }
  .info {
    margin-top: 0.15rem;
    .first {
      font-size: 0.15rem;
      > span {
        margin-right: 0.1rem;
        color: var(--black);
      }
    }
    .signature {
      font-size: 0.15rem;
      color: var(--text-gray);
    }
  }
  .correlation {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 0.1rem;
    > div {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size: 0.14rem;
      > div {
        margin-bottom: 0.05rem;
      }
    }
  }
  .vip {
    margin-top: 0.15rem;
    width: 3.46rem;
    height: 0.45rem;
  }
  .tags {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0.15rem 0;
    .tag {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .img-box {
        position: relative;
        width: 0.25rem;
        height: 0.25rem;
        margin-bottom: 0.05rem;
      }
      .title {
        width: 100%;
        height: 0.4rem;
        font-size: 0.14rem;
        line-height: 0.2rem;
        text-align: center;
        color: var(--text-gray);
      }
    }
  }
  .nav {
    .content {
      width: 100%;
      min-height: 5rem;
      box-sizing: border-box;
      padding: 0.1rem;
      font-size: 0.15rem;
      color: var(--text-gray);
    }
  }
  .van-cell {
    font-size: 0.16rem;
    color: var(--text-black);
  }
  .svg-box {
    display: flex;
    width: 0.24rem;
    overflow-x: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .icon-svg {
      width: 0.24rem;
      min-width: 0.24rem;
      height: 0.24rem;
    }
  }
}
</style>
<style lang="scss">
.mine {
  .van-tab {
    height: 0.5rem;
    min-height: 0.5rem;
    transition: 0.5s;
    font-size: 0.16rem;
    line-height: 0.25rem;
  }
  .van-tab--active {
    // font-size: 0.25rem;
    font-weight: bold;
  }
  .van-tabs__line {
    height: 0.03rem !important;
    background-color: var(--bgc-yellow) !important;
  }
}
</style>